<template>
  <div id="page">
    <div class="bg"></div>
    <header>
      <el-page-header @back="goBack" :content="$route.query.title">
      </el-page-header>
    </header>
    <div class="container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>按月统计交易金额</span>
        </div>
        <div id="main1"></div>
      </el-card>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts/core";
import "echarts-liquidfill";
import {
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
]);
export default {
  name: "tradeStatistics",
  data() {
    return {};
  },
  methods: {
    drawAmountBar() {
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          name: "万元",
        },
        series: [
          {
            name: "电商",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320, 254, 124, 125, 155],
          },
          {
            name: "互联网医院",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320, 254, 124, 125, 155],
          },
          {
            name: "养老服务",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 232, 201, 334, 190, 330, 310, 201, 234, 190, 330],
          },
          {
            name: "供应链销售",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 130],
          },
          {
            name: "云药房",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [150, 212, 201, 154, 190, 330, 410, 201, 154, 190, 130],
          },
          {
            name: "线下医疗",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 130],
          },
        ],
      };
      myChart.on("click", (params)=> {
        let token = JSON.parse(sessionStorage.getItem("loginInfo")).token;
        switch (params.seriesName) {
          case "线下医疗":
            break;
          case "云药房":
            this.getToken();
            break;
          case "互联网医院":
            window.open(
              `https://hospital.yyanglao.com/pc/#/login?token=${token}`
            );
            break;
          case "供应链销售":
            break;
          case "养老服务":
            window.open(
              `https://test.yyanglao.com/jgadmin/login?token=${token}`
            );
            break;
          case "电商":
            window.open(`https://account.youzan.com/login`);
            break;
        }
      });
      option && myChart.setOption(option);
    },
    /***云药房获取token**/
    async getToken() {
      let res = await this.$base.axiosPost(
        "https://yydsdev.yiy-tech.cn/server/user/login",
        {
          username: "demo",
          encPassword:
            "$2a$04$eJyhA799Usp63.f4XjAmoOVWrQ9iIw4hqZih1FCz4bw8JeV82/a/i",
          logintype: "backend",
        }
      );
      window.open(
        "https://yydsdev.yiy-tech.cn/manage/#/login?token=" + res.data.token,
        "_blank"
      );
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.drawAmountBar();
    });
  },
};
</script>
<style lang="scss" scoped>
#page {
}
// .bg {
//   position: fixed;
//   height: 100%;
//   width: 100%;
//   background-color: $backgroundColor;
// }
header {
  position: fixed;
  left: -20px;
  z-index: 3;
  width: 100%;
  padding: 20px 40px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}
.container {
  position: relative;
  top: 84px;
  width: 85%;
  max-width: 1280px;
  min-height: 700px;
  padding-bottom: 20px;
  margin: 0 auto 84px;
  background-color: #fff;
  .el-card {
    margin-bottom: 20px;
  }
  #main1 {
    height: 80vh;
    width: 100%;
  }
}
</style>